/**
 * 
 */
Ext.define('Case.Step', {
	extend: 'Ext.form.Panel',
	alias: 'case.step',

    
    
    initComponent: function() {
		var me_step = this;
		Ext.apply(me_step, {
			closable: true,
		    frame:true,
		    //title: 'No Name',
		    bodyStyle:'padding:5px 5px 0',
		    anchor: '100% 100%',
		    fieldDefaults: {
		        labelAlign: 'left',
		        msgTarget: 'side'
		    },
		    items: [{
		        xtype: 'container',
//		        anchor: '100%',
//		        height: '20%',
		        layout:'column',
		        items:[{
		            xtype: 'container',
		            columnWidth:.5,
		            layout: 'anchor',
		            items: [/*{
		                xtype:'textfield',
		                fieldLabel: 'name',
		                name: 'name',
		                anchor:'96%'
		            },*/{
		            	xtype: 'textfield',
		            	fieldLabel: 'url',
		            	name: 'url',
		            	anchor: '96%'
		            },{
		            	xtype: 'container',
		            	layout: 'column',
		            	anchor: '96%',
		            	items: [{
		            		xtype: 'combo',
		            		name: 'method',
		            		fieldLabel: 'method',
		                    columnWidth:.5,
		            		anchor: '40%',
		            		queryMode: 'local',
		            		displayField: 'name',
		            		valueField:'name',
		            		editable:false,
		            		triggerAction:'all',
		            		store: Ext.create('Ext.data.Store', {
		            			fields: ['name'],
		            			data: [
		            			       {"name":"GET"},
		            			       {"name":"PUT"},
		            			       {"name":"POST"}
		            			       ]
		            		})
		            	},{
		            		xtype: 'combo',
		            		name: 'format',
		            		fieldLabel: 'format',
		            		id:'method',
		            		editable: false,
		                    columnWidth:.5,
		            		anchor: '40%',
		            		queryMode: 'local',
		            		displayField: 'name',
		            		valueField:'name',
		            		store: Ext.create('Ext.data.Store', {
		            			fields: ['name'],
		            			data: [
		            			       {"name":"XML"},
		            			       {"name":"JSON"}
		            			       ]
		            		})
		            	}]
		            }]
		        },{
		            xtype: 'container',
		            columnWidth:.5,
		            layout: 'anchor',
		            items: [{
		                xtype:'textarea',
		                fieldLabel: 'description',
		                height: 25,
		                name: 'desc',
		                anchor:'100%'
		            },
			        {
			        	xtype: 'textarea',
			        	fieldLabel: 'header',
			        	height: 50,
			        	name: 'header',
			        	anchor: '100%'
			      
			        }]
		        }]
		    }, {
		        xtype: 'container',
//		        anchor: '100% 100%',
		        height: '90%',
		        layout: {
		            type: 'border',
		            padding: 0
		        },
		        defaults: {
		            split: true,
		            collapsible: true
		        },
		        items: [{
		        	xtype: 'textarea',
		        	region: 'west',
		            collapsible: true,
		            split: true,
		        	width: '100%',
		        	fieldLabel: 'request',
		        	name: 'request',
		        	labelAlign: 'top',
		        	listeners: {
		        		change: {
		        			fn: function() {
		        				if (__auto_parse)
		        					caseDetail.parseParams();
							}
		        		}
		        	}
		        },{
		        	xtype: 'textarea',
		        	region: 'center',
		        	fieldLabel: 'response',
		        	name: 'response',
		        	labelAlign: 'top',
		        	listeners: {
		        		change: {
		        			fn: function() {
		        				if (__auto_parse)
		        					caseDetail.parseParams();
							}
		        		}
		        	}      	
		        }]
		    }]/*,

		    buttons: [{
		        text: 'Save',
		        xtype: 'button',
		        scope: this,
		        handler: function() {
		        	var formPanel = Ext.getCmp('step1');
		        	//formPanel.el.mask('Please Wait', 'x-mask-loading');
		        	formPanel.setLoading({msg:'Saving...'});
		        	formPanel.getForm().submit({url: 'caseSubmit.jsp',success:me.onSuccessOrFail,failure:me.onSuccessOrFail});
		    	}
		    },{
		        text: 'Cancel'
		    }]
		    */
		});
		me_step.callParent(arguments);
	},
	
	getStepModel: function() {
		var me_step = this;
		var stepModel = me_step.getRecord();
		if (!stepModel){
			stepModel = Ext.ModelManager.create({}, 'CaseStep');
		}
		me_step.getForm().updateRecord(stepModel);
		stepModel.set('name', me_step.title);
		return stepModel;
	},
    
    onSuccessOrFail : function(form, action) { 
    	var formPanel = Ext.getCmp('step1'); 
    	//formPanel.el.unmask();
    	formPanel.setLoading(false);
    	var result = action.result;
    	if (result.success) {
    		Ext.MessageBox.alert('Success',action.result.msg);
    	}
    	else { 
    		Ext.MessageBox.alert('Failure',action.result.msg);
    	}
    }
});